<template>
  <div>
    <Window :showCancel="false" :show="windowConfig.show" :buttons="windowConfig.buttons"
      @close="windowConfig.show = false">
      <el-row :gutter="10">
        <el-col :span="10">
          <el-card class="box_card">
            <template #header>
              <div class="card_header">
                <span>专题文章</span>
              </div>
            </template>
            <div class="special_blog_tree">
              <el-tree @node-click="treeNodeClick" class="tree-panel" ref="refTree" :data="blogList" defaultExpandAll
                node-key="blogId" :expand-on-click-node="false" :props="treeProps" :highlight-current="true">
                <template #default="{ node, data }">
                  <span class="custom-node-style">
                    <span class="node-title">
                      <span v-if="data.status == 0" :style="{ 'color': 'red', 'font-size': '13px' }">{{ data.title
                        }}</span>
                      <span v-else :style="{ 'color': 'green', 'font-size': '13px' }">{{ data.title }}</span>
                    </span>
                  </span>
                </template>
              </el-tree>
            </div>
          </el-card>
        </el-col>
        <el-col :span="14">
          <el-card class="box_card">
            <template #header>
              <div class="card_header">
                <span>文章详情</span>
              </div>
            </template>
            <div v-if="blog.title">
              <div class="my_title">{{ blog.title }}</div>
              <div v-html="blog.content" class="blog_detail"></div>
            </div>
            <div v-else class="no-data">
              请选择博客专题文章查看详情。。。
            </div>
          </el-card>
        </el-col>
      </el-row>

    </Window>

  </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, nextTick } from 'vue'
const { proxy } = getCurrentInstance();
import hljs from "highlight.js"; // 引入highlight.js库
import "highlight.js/styles/atom-one-dark.css";// 引入样式表，这里使用的是Atom One Light风格

const api = {
  'getBlogDetail': 'blog/getBlogById',
  'getSpecialInfo': '/blog/getSpecialInfo',

}
const blog = ref({})

const windowConfig = reactive({
  show: false,
  buttons: [{
    type: 'danger',
    text: '确定',
    click: (e) => {
      windowConfig.show = false;
    }
  }]
})

const showDetail = (data) => {
  currentBlogId.value = data.blogId
  windowConfig.show = true;
  //获取所有文章数
  getSpecialInfo(data.categoryId);
  showBlogDetail(data.blogId);
}

const treeNodeClick = (data) =>{
  if(data.blogId == '0'){
    blog.value = {};
  }
  showBlogDetail(data.blogId)
}

// 属性展示专题
const treeProps = {
  children: 'children',
  label: 'title',
  value: 'blogId'
}

const currentBlogId = ref(null)
const refTree = ref(null);
const blogList = ref([])
const getSpecialInfo = async (categoryId) => {
  let res = await proxy.Request({
    url: api.getSpecialInfo,
    params: {
      categoryId: categoryId,
      showType: '1'
    }
  })
  if (!res) {
    return;
  }
  blogList.value = res.data
  nextTick(() => {
    refTree.value.setCurrentKey(currentBlogId.value);
  });
}

defineExpose({ showDetail })

const showBlogDetail = async (blogId) => {
  let res = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId  
    }
  })
  if (!res) {
    return;
  }
  blog.value = res.data
  nextTick(() => {
    // 高亮显示  
    let blocks = document.querySelectorAll('pre code');
    blocks.forEach((block) => {
      hljs.highlightElement(block); //   
    });

  });
}
</script>

<style lang='scss'>
.my_title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.blog_detail {
  blockquote {
    padding: 0 1em;
    color: #adbfd3;
    border-left: 0.25em solid #dfe2e5;
  }

  img {
    max-width: 80%;
  }
}
</style>